<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>积分商城</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 380px;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
				<div style="height: 50px;width: 380px;background-color: #FFFFFF;display: flex;justify-content: space-between;align-items: center;">
					<div>
						<a href="index.html">
							<div style="margin-left: 20px;">《</div>
						</a>
					</div>
					<div style="width: 240px;">
						<span style="margin-top: 8px;display: inline-block;font-size: 14px;">积分商城</span>

					</div>
				</div>
				<div style="background-color: #FFFFFF;padding: 20px;display: flex;justify-content: space-between;">
					<div>
						<p style="color: #555555;font-size: 12px;">可用积分</p>
						<p style="font-size: 40px;font-weight: bold;">22</p>
						<span style="margin-top: 35px;display: block;font-size: 13px;color: #333333;">
							<span style="margin-right: 20px;">积分明细</span><span>|</span><span style="margin-left: 20px;">兑换记录</span>
						</span>
					</div>
					<img src="image/jifenimg.png" alt="" style="width: 120px;height: 120px;">
				</div>
				<div style="margin-top: 10px;padding: 30px 25px;background-color: white">
					<ul>
						<li style="display: flex;justify-content: space-between;">
							<div>
								<img src="image/maierzengyiquan.png" alt="" style="width: 148px;height: 82px;">
								<p style="font-size: 14px;margin-top: 10px;">外卖买二赠一券</p>
								<p style="color: #B8741A;margin-top: 3px;">2400<span style="font-size: 12px;color: #C3C3C3;margin-left: 10px;">积分</span></p>
							</div>
							<div>
								<img src="image/maierzengyiquan.png" alt="" style="width: 148px;height: 82px;">
								<p style="font-size: 14px;margin-top: 10px;">外卖波波家族券</p>
								<p style="color: #B8741A;margin-top: 3px;">2800<span style="font-size: 12px;color: #C3C3C3;margin-left: 10px;">积分</span></p>
							</div>
						</li>
						<li style="display: flex;justify-content: space-between;margin-top: 30px;">
							<div>
								<img src="image/maierzengyiquan.png" alt="" style="width: 148px;height: 82px;">
								<p style="font-size: 14px;margin-top: 10px;">外卖买一赠一券</p>
								<p style="color: #B8741A;margin-top: 3px;">2800<span style="font-size: 12px;color: #C3C3C3;margin-left: 10px;">积分</span></p>
							</div>
							<div>
								<img src="image/maierzengyiquan.png" alt="" style="width: 148px;height: 82px;">
								<p style="font-size: 14px;margin-top: 10px;">外卖咖啡券</p>
								<p style="color: #B8741A;margin-top: 3px;">2900<span style="font-size: 12px;color: #C3C3C3;margin-left: 10px;">积分</span></p>
							</div>
						</li>
					</ul>
					<p style="text-align: center;margin: 20px;color: #aaaaaa;font-size: 12px;">没有更多了 ~</p>
				</div>
			</div>
		</div>
	</body>
</html>